<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>试题管理</title>
    <link rel="stylesheet" href="/static/resources/bootstrap/css/bootstrap.css"/>
    <link href="/static/resources/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="/static/resources/css/style.css" rel="stylesheet">
    <link href="/static/resources/css/exam.css" rel="stylesheet">
    <link href="/static/resources/css/laypage.css" rel="stylesheet">
    <!-- Javascript files -->
    <!-- jQuery -->
    <script type="text/javascript" src="/static/resources/js/jquery/jquery-3.1.1.min.js"></script>
    <!--VUE-->
    <script type="text/javascript" src="/static/resources/vue/vue.js"></script>
    <script type="text/javascript" src="/static/resources/vue/date.js"></script>
    <!-- Bootstrap JS -->
    <script type="text/javascript" src="/static/resources/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/static/resources/laypage/laypage.js"></script>
    <script type="text/javascript" src="/static/resources/layui/layui.all.js"></script>
</head>
<body>
<header>
    <div class="logo">
        <h1>在线考试系统</h1>
    </div>
    <div class="navbar bs-docs-nav" role="banner">
        <div class="container" style="margin: 0  264px ;">
            <ul class="nav navbar-nav">
                <li class="nav-tabs">
                    <a href="/toMain.do" style="font-size: 1.2em; width: 135px;"><i
                            class="glyphicon glyphicon-home"></i>&nbsp;首页</a>
                </li>
                <li class="nav-tabs">
                    <a href="/view/question/question-list" style="font-size: 1.2em;width: 132px;"><i
                            class="glyphicon glyphicon-list"></i>&nbsp;试题管理</a>
                </li>

                <li>
                    <a href="/ExamPage/toExamPaper.do" style="font-size: 1.2em;width: 132px;"><i
                            class="glyphicon glyphicon-list-alt"></i>&nbsp;试卷管理</a>
                </li>
                <li>
                    <a href="/toExam.do" style="font-size: 1.2em;width: 132px;"><i
                            class="glyphicon glyphicon-indent-right"></i>&nbsp;考试管理</a>
                </li>
                <li>
                    <a href="/toUser.do" style="font-size: 1.2em;width: 130px;"><i
                            class="glyphicon glyphicon-user"></i>&nbsp;用户管理</a>
                </li>
                <li>
                    <a href="/toTag.do" style="font-size: 1.2em;width: 132px;"><i
                            class="glyphicon glyphicon-random"></i>&nbsp;通用管理</a>
                </li>
                <li>
                    <a href="/toSystem.do" style="font-size: 1.2em;width: 132px;"><i
                            class="glyphicon glyphicon-cog"></i>&nbsp;系统设置</a>
                </li>
            </ul>
            <a href="/userLogout" style="position: absolute;right: 100px; top: 10px;"><i class=""></i>[注销]</a>
        </div>

    </div>
</header>

        <div id="app" class="container" style="width: 1200px">
            <div class="col-xs-10" id="right-content" style="width: 100%">
            <div class="page-header"></div>
                <div id="question-list">
                    <div class="table-controller">
                        <div class="btn-group table-controller-item" >
                            <button class="btn btn-default btn-sm" id="addQuestionBtn"
                                    style="font-size: 1.3em;">
                                <i class="fa fa-plus-square"></i> 添加试题
                            </button>

                        </div>
                        <form id="searchForm" class="form-inline">
                            <div class="from-group search-form">
                                查询条件：
                                <input type="text" class="form-control" placeholder="题目" id="questionName"
                                       style="width: 100px;">&emsp;
                                <div class="form-group">
                                    <label class="sr-only" for="questionType">请选择分类</label>
                                    <select class="form-control" id="questionType">
                                        <option value="">请选择题型</option>
                                        <option value="1">选择题</option>
                                        <option value="3">判断题</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label class="sr-only" for="field">请选择分类</label>
                                    <select class="form-control" id="field" style="width: 120px;">
                                        <option value="">请选择题库</option>
                                        <option v-for="(item,index) in fieldListresult" v-bind:value="item.fieldId">
                                            {{item.fieldName}}
                                        </option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label class="sr-only" for="point">详细分类</label>
                                    <select class="form-control" id="point" style="width: 250px;">
                                        <option value="">请选择知识点</option>
                                        <option v-for="(item,index) in pointListresult" v-bind:value="item.pointId">
                                            {{item.pointName}}
                                        </option>
                                    </select>
                                </div>
                                <input type="text" class="form-control" placeholder="出题人姓名" id="creator"
                                       style="width: 100px;">&emsp;
                                <button class="btn btn-sm btn-info" type="button" id="btn-search">
                                    <i class="fa fa-search"></i>搜索
                                </button>
                            </div>
                        </form>
                    </div>
                    <table class="table-striped table" align="center">
                        <thead>
                        <tr>
                            <td>序号</td>
                            <td>题目</td>
                            <td>题型</td>
                            <td>题库</td>
                            <td>创建时间</td>
                            <td>出题人</td>
                            <td style="width:100px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
                        </tr>
                        </thead>
                        <tbody>
                        <tr class="active" v-for="(item,index) in result">
                            <td>{{index+1}}</td>
                            <td>{{item.name}}</td>
                            <td>{{item.questionType.name}}</td>
                            <td>{{item.field.fieldName}}</td>
                            <td>{{item.createTime | DateFilter}}</td>
                            <td>{{item.creator}}</td>
                            <td>
                                <span class="r-update-btn btn-sm btn-info" @click="editInfo(item.id)">详情</span>
                            </td>
                        </tr>
                        </tbody>
                        <tr align="center">
                            <td colspan="11">
                                <div id="pagenav"></div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>


        <footer>
            <div class="container" style="width: 500px; margin: 0 auto;">
                <div class="row">
                    <div class="col-md-12">
                        <div class="copy">
                            <p>
                                ExamManage © <a href="javascript:void(0);" target="_blank">ExamManage</a> - <a
                                    href="javascript:void(0);" target="_blank">主页</a> | <a href="javascript:void(0);"
                                                                                           target="_blank">关于我们</a>
                                | <a href="javascript:void(0);" target="_blank">FAQ</a> | <a
                                    href="javascript:void(0);" target="_blank">联系我们</a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
</body>
</html>
<script>
    Vue.filter("DateFilter", function (date) {
        var v = new Date(date);
        return formatDate(v, "yyyy-MM-dd HH:mm:ss");
    });

    var app = new Vue({
        el: "#app",
        data: {
            result: [],
            fieldListresult: [],
            pointListresult: []
        }
    });

    var getQuestionByPage = function (curr) {
        $.ajax({
            type: 'POST',
            url: '/queryQuestion',
            dataType: 'json',
            data: {
                currPage: curr || 1,
                questionName: $("#questionName").val(),
                questionTypeId: $("#questionType").val(),
                fieldId: $("#field").val(),
                pointId: $("#point").val(),
                creator: $("#creator").val()
            },
            success: function (msg) {
                console.log(msg);
                app.result = msg.page;
                laypage({
                    cont: 'pagenav',  //分页容器
                    pages: msg.totalPages, //总页数
                    skin: '#333333',
                    first: '第一页',
                    last: '最后一页',
                    curr: curr || 1,
                    jump: function (obj, first) {
                        if (!first) {
                            getQuestionByPage(obj.curr);
                        }
                    }
                });
            }
        });
    };


    $("#addQuestionBtn").click(function () {
        layer.open({
            type: 2,
            title: '添加试题',
            fix: false,
            maxmin: true,
            shadeClose: true,
            area: ['1000px', '600px'],
            content: '/view/question/question-import',
            end: function () {
                getQuestionByPage();
            }
        });
    });


    var editInfo = function (id) {
        layer.open({
            type: 2,
            title: '试题详情',
            fix: false,
            maxmin: true,
            shadeClose: true,
            area: ['1000px', '600px'],
            content: '/questionDetail?id=' + id,
            end: function () {
                getQuestionByPage($(".laypage_curr").text());
            }
        });
    }

    //查询分类列表信息 郭瀚钰
    function getAllField() {
        $.ajax({
            type: 'post',
            url: '/getAllField',
            dataType: 'json',
            success: function (msg) {
                app.fieldListresult = msg
            }, error: function () {
             //   alert("分类列表失败")
            }
        })
    }

    //根据父类获取小类列表信息 郭瀚钰
    function getPointByField() {
        $.ajax({
            type: 'post',
            url: '/Point/getPointByField',
            dataType: 'json',
            data: {
                fieldId: $("#field").val()
            },
            success: function (msg) {
                app.pointListresult = msg
            }, error: function () {
            //    alert("子类分类列表失败")
            }
        })
    }

    $(function () {
        getAllField();
        getPointByField();
        getQuestionByPage();

        $("#btn-search").click(function () {
            getQuestionByPage();
        });

        //父类下拉框
        $("#field").change(function () {
            getPointByField();
        })

    })

</script>